<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入 Bootstrap 的 CSS 样式表 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
	</head>
	<body>
		<div id="app">
			<!-- 使用自定义组件 table-com，并向其传递数据 gridData 和列信息 gridColumns -->
			<table-com :data="gridData" :columns="gridColumns"></table-com>
		</div>
		<!-- 定义一个模板，用于自定义组件 table-com 的内容 -->
		<template id="temp">
			<div id="container">
				<!-- 创建一个带有边框和悬停效果的表格 -->
				<table class="table table-bordered table-hover">
					<!-- 表头，通过 v-for 循环生成列名 -->
					<tr>
						<th v-for="col in columns">{{col}}</th>
					</tr>
					<!-- 表格主体，通过 v-for 循环生成行数据 -->
					<tr v-for="row in data">
						<td v-for="col in columns">{{row[col]}}</td>
					</tr>
				</table>
			</div>
		</template>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			// 定义名为 'table-com' 的 Vue 组件
			Vue.component('table-com', {
				// 使用定义在模板中的内容
				template: "#temp",
				// 声明组件接收的属性
				props: {
					// 接收名为 'data' 的数组属性
					data: Array,
					// 接收名为 'columns' 的数组属性
					columns: Array
				}
			})
			// 创建一个 Vue 实例，并将其挂载到具有 id 为 'app' 的元素上
			var vm = new Vue({
				el: "#app",
				// 定义实例的数据
				data: {
					// 定义列名数组
					gridColumns: ['课程', '价格', '描述'],
					// 定义表格数据数组
					gridData: [{
							课程: "Vue",
							价格: 20,
							描述: "是一套用于构建用户界面的渐进式框架"
						}, {
							课程: "Python",
							价格: 30,
							描述: "一种广泛使用的高级编程语言"
						},
						{
							课程: "Java",
							价格: 25,
							描述: "面向对象的编程语言，应用广泛"
						},
						{
							课程: "C++",
							价格: 28,
							描述: "高效的系统编程语言"
						}
					]
				}
			})
		</script>
	</body>
</html>